<template>
    <div>
        <el-button type="primary" style="margin:20px" @click="getExcel">导出Excel
        </el-button>
        <el-container style="line-height: 30px;">
            <el-header style="text-align:left; font-size: 15px;height: 30px;border-radius: 15px;background-color: #d7d7ff;">
                计价方式
            </el-header>
            <el-main>
                <router-view/>
            </el-main>
        </el-container>
        <!-- 查询-->
        <el-table :data="users" style="width: 100%" border stripe>
            <!--  gid  glsf    nhsf	jcfw ycfw bzbm	bzmc fykm kmlx price   jffs   sxsj -->
            <el-table-column label="序号" prop="gid"/>
            <el-table-column label="管理类型" prop="gname"/>
            <el-table-column label="管理收费" prop="glsf"/>
            <el-table-column label="能耗收费" prop="nhsf"/>
            <el-table-column label="基础服务收费" prop="jcfw"/>
            <el-table-column label="有偿服务" prop="ycfw"/>
            <el-table-column label="标准编码" prop="bzbm"/>
            <el-table-column label="标准名称" prop="bzmc"/>
            <el-table-column label="费用科目" prop="fykm"/>
            <el-table-column label="科目类型" prop="kmlx"/>
            <el-table-column label="单价" prop="price"/>
            <el-table-column label="计费方式" prop="jffs"/>
            <el-table-column label="生效时间" prop="sxsj"/>
        </el-table>
    </div>
</template>

<script>
    export default {
        name: "jjfs",
        data(){
            return{
                users:{},
            }
        },
        created () {
            const that = this;
            this.axios.get('http://localhost:8085/Jjbz/select')
                .then(function (response) {
                    console.log(response);
                    that.users = response.data;
                })
        },
        methods: {
            getExcel() {
                require.ensure([], () => {
                    const { export_json_to_excel } = require('../../router/Export2Excel.js')
                    const tHeader = ['序号', '管理类型','管理收费','能耗收费','基础服务收费','有偿服务','标准编码','标准名称','费用科目','科目类型','单价','计费方式','生效时间']
                    const filterVal = ['gid', 'gname','glsf','nhsf','jcfw','ycfw','bzbm','bzmc','fykm','kmlx','price','jffs','sxsj']
                    const list = this.users
                    const data = this.formatJson(filterVal, list)
                    export_json_to_excel(tHeader, data, '计价方式信息')
                })
            },
            formatJson(filterVal, jsonData) {
                return jsonData.map(v => filterVal.map(j => v[j]))
            },
        },

    }
</script>

<style scoped>

</style>